// useScrollToTopButton.ts

import { useEffect, useState } from 'react';

// 定义可传递给 useScrollToTopButton 钩子的属性
interface ScrollToTopButtonProps {
  threshold?: number; // 触发按钮可见性的可选阈值
}

// 自定义钩子，用于管理“回到顶部”按钮的可见性
export const useScrollToTopButton = ({ threshold = 300 }: ScrollToTopButtonProps = {}) => {
  // 用于追踪“回到顶部”按钮可见性的状态
  const [isVisible, setIsVisible] = useState(false);

  // 处理滚动事件以确定按钮可见性的函数
  const handleScroll = () => {
    // 获取当前垂直滚动位置
    const scrollTop = window.scrollY || document.documentElement.scrollTop;

    // 根据滚动位置和阈值更新按钮可见性
    if (scrollTop > threshold) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };

  // 滚动到页面顶部的函数
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  // 在组件挂载时添加滚动事件监听器
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    // 组件卸载时移除滚动事件监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // 空依赖数组确保效果仅在组件挂载时运行一次

  // 以供外部使用的状态和函数
  return {
    isVisible, // 布尔值，指示按钮是否应可见
    scrollToTop, // 滚动到页面顶部的函数
  };
};
